<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
  <style>
    /**
 * Define the space for each grid item by declaring the grid
 * on the grid container.
 */
    #grid {
      /**
       * Two columns:
       *  1. the first sized to content,
       *  2. the second receives the remaining space
       *     (but is never smaller than the minimum size of the board
       *     or the game controls, which occupy this column [Figure 4])
       *
       * Three rows:
       *  3. the first sized to content,
       *  4. the middle row receives the remaining space
       *     (but is never smaller than the minimum height
       *      of the board or stats areas)
       *  5. the last sized to content.
       */
      display: grid;
      grid-template-columns:
        /* 1 */ auto
        /* 2 */ 1fr;
      grid-template-rows:
        /* 3 */ auto
        /* 4 */ 1fr
        /* 5 */ auto;
    }

    /* Specify the position of each grid item using coordinates on
     * the 'grid-row' and 'grid-column' properties of each grid item.
     */
    #title    { grid-column: 1; grid-row: 1; width: 20%}
    #score    { grid-column: 1; grid-row: 3; }
    #stats    { grid-column: 1; grid-row: 2; align-self: start; }
    #board    { grid-column: 2; grid-row: 1 / span 2; }
    #controls { grid-column: 2; grid-row: 3; justify-self: center; }
    .box{
      line-height: 120px;
      background-color: #f0f3f9;
    }
    .content{
      display: inline-block;
      line-height: 20px;
      margin: 0 20px;
      vertical-align: middle;
    }
    .box01{
      line-height: 32px;
      display: inline-block;
         }
    .box01 > span{font-size: 24px;}
  </style>

</head>

<body>

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="allmap">Controls</div>
</div>
<div class="box">
  <div class="content">基于行高的实现...</div>
</div>
<div class="box01">
  <span>文字</span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
<script>
  var app = new Vue({
    el: "#grid",
    data: {},
    mounted(){
      this.over();
    },
    methods: {
      over:function () {
        axios.get('http://bird.ioliu.cn/v2/?url=http://api.wap.guoguo-app.com/h5/mtop.cnwireless.cnlogisticdetailservice.wapquerylogisticpackagebymailno/1.0/?v=1.0&api=mtop.cnwireless.CNLogisticDetailService.wapqueryLogisticPackageByMailNo&appKey=12574478&t=1514426430896&callback=mtopjsonp3&type=jsonp&sign=2e874b6cd7b25c148e0e8c2d66c905bb&data=%7B%22mailNo%22%3A%22700074134800%22%7D').then(re=>{
          console.log(re);
        })
      }
    }
  })

</script>
</body>
</html>
